<template>
  <div class="">
      我是watch监听页面
  </div>
</template>

<script>
import { ref, reactive, toRefs, watchEffect, watch } from "vue";
export default {
  setup() {
    //  const count = ref(0);
    // watchEffect(()=>{ // 默认是要触发一次
    //    console.log(count.value) // 这里的值会被打印两次，0，1
    // })
    // setTimeout(() => {
    //   count.value++
    // //   console.log();
    //   // -> logs 1
    // }, 1000)

    // const data = reactive({num:0});
    // watchEffect(()=>{
    //    console.log(data.num) // 这里的值会被打印两次，0，1
    //    console.log(data) // 这里的对象只会被打印一次
    // })
    // setTimeout(() => {
    //   data.num++
    // }, 1000)
    // const count = ref(0);
    // watch(count, (newVal,oldVal)=>{
    //    console.log(newVal) // 1
    //    console.log(oldVal) // 0
    // },{
    //     immediate:true // 默认开启一簇监听
    // })
    // setTimeout(() => {
    //   count.value++
    //   // -> logs 1
    // }, 1000)

    const data = reactive({
        num:0
    });
    watch(()=>data.num, (newVal,oldVal)=>{
       console.log(newVal) // 1
       console.log(oldVal) // 0
    })
    setTimeout(() => {
      data.num++
      // -> logs 1
    }, 1000)
  },
};
</script>
<style lang="scss" scoped>
</style>